<script setup lang="ts">
import { getToplistDetailAPI } from '@/services/toplist'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import MyHeader from '@/components/header/myHeader.vue'
import indexSkeleton from './components/indexSkeleton.vue'
// 排行榜详情数据
const toplistDetail = ref<any>([])
const isLoad = ref<boolean>(false)

// 获取排行榜详情数据
function getToplistDetailData(count?: number) {
  isLoad.value = true
  getToplistDetailAPI().then((res) => {
    toplistDetail.value = res.list.slice(0, count || 4)
    isLoad.value = !isLoad.value
  })
}
// 截取字符串长度
function limitLength(str: string, maxLength: number) {
  if (typeof str === 'string' && str.length > maxLength) {
    return str.slice(0, maxLength) + '...'
  } else {
    return str
  }
}

function toSongListDetails(id: number) {
  uni.navigateTo({
    url: `/pages/songListDetails/songListDetails?id=${id}`,
  })
}

function toSearch() {
  uni.navigateTo({
    url: '/pages/search/search',
  })
}

// 页面加载时获取排行榜详情数据
onLoad(() => {
  getToplistDetailData(4)
})
</script>

<template>
  <view class="index">
    <indexSkeleton v-if="isLoad" />
    <view v-else>
      <MyHeader title="歌单" show-icon class="header" />

      <view class="search-box" @click="toSearch">
        <view class="iconfont icon-sousuo"></view>
        <view type="text" class="search-input">
          <text>请输入搜索内容</text>
        </view>
      </view>
      <scroll-view :scroll-y="true">
        <view class="toplist-list">
          <view
            class="toplist-list-item"
            @click="toSongListDetails(item.id)"
            v-for="(item, index) in toplistDetail"
            :key="index"
          >
            <view class="toplist-cover-wrap">
              <image class="toplist-cover" :src="item.coverImgUrl"></image>
              <text>{{ item.updateFrequency }}</text>
            </view>
            <view class="toplist-item-text">
              <view v-for="(track, trackIndex) in item.tracks" :key="track.first">
                <text
                  >{{ trackIndex + 1 }}. {{ limitLength(track.first, 10) }} -
                  {{ track.second }}</text
                >
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<style lang="scss">
.index {
  .search-box {
    width: 100%;
    position: relative;
    .search-input {
      background: #f7f7f7;
      margin: 0 15px;
      margin-bottom: 15px;
      height: 40px;
      border-radius: 20px;
      text-indent: 2.3rem;
      color: #b9b9b9;
      display: flex;
      align-items: center;
    }
    .icon-sousuo {
      position: absolute;
      top: 10px;
      left: 28px;
      font-size: 18px;
      color: #b9b9b9;
    }
  }
  .toplist-list {
    padding: 0 15px;

    margin-top: 20px;
    .toplist-list-item {
      display: flex;
      margin-bottom: 20px;
      .toplist-cover-wrap {
        position: relative;
        image {
          width: 212rpx;
          height: 212rpx;
          border-radius: 5px;
        }
        text {
          position: absolute;
          width: 100%;
          left: 5px;
          bottom: 5px;
          font-size: 12px;
          color: #fff;
        }
      }
      .toplist-item-text {
        margin-left: 20px;
        view {
          margin-top: 14px;
          font-size: 14px;
          color: #888888;
          display: -webkit-box; /* 使用弹性布局 */
          -webkit-box-orient: vertical; /* 垂直方向排列 */
          overflow: hidden; /* 隐藏超出部分 */
          -webkit-line-clamp: 2; /* 设置最大显示行数 */
        }
      }
    }
  }
}
</style>
